<!--
*@description 首页  底部系统推荐
*@fileName com-foot.vue
*@author wxl
*@date 2025/02/26 14:24:09
!-->
<template>
   <div class="com-card aicjcsb intro-card">
      <div class="item cdf jccaic" v-for="(item,index) in introList" :key="index">
        <img class="icon" :src="item.icon" alt="">
        <div class="desc">{{ item.desc }}</div>
        <div class="desc">{{ item.descsub }}</div>
        <div class="phone" v-if="item.phone">{{ item.phone }}</div>
        <img class="arrow-icon" :src="item.arrowIcon" alt="" v-if="item.arrowIcon">
      </div>
      <div class="cdf jccaic">
        <img class="wxcode-img" :src="wxcode" alt=""></img>
        <div class="text-bold">请用微信扫一扫扫码关注</div>
      </div>
   </div>
</template>
<script setup>
import icon1 from '@/assets/index_service.png'
import icon2 from '@/assets/index_phone.png'
import icon3 from '@/assets/index_code.png'
import wxcode from '@/assets/wx_code.jpg'
import arrowIcon from '@/assets/arrow_right.png'
const introList = ref([{
  desc: '座机服务热线',
  descsub: '5x8小时在线',
  phone: '029-89286373',
  icon: icon1
},{
  desc: '手机服务热线',
  descsub: '7x24小时在线',
  phone: '137-0929-1044',
  icon: icon2
},{
  desc: '扫描二维码关注',
  descsub: '给您专业的服务指导',
  icon: icon3,
  arrowIcon: arrowIcon
}])
</script>
<style lang="scss" scoped>
.intro-card{
  height: 100%;
  padding: 15px 80px!important;
  .item{
    text-align: center;
    .icon{
      width: 69px;
      height: 69px;
      margin-bottom: 15px;
    }
    .arrow-icon{
      width: 25px;
      margin-top: 10px;
    }
    .desc{
      font-size: 13px;
      color:#5A6270;
      margin: 3px 0;
    }
    .phone{
      font-size: 16px;
      font-weight: 800;
      margin-top: 10px;
    }
  }
  .wxcode-img{
    width: 140px;
    height: 140px;
    margin-bottom: 10px;
  }
}
</style>
